<%@page import="com.vietnam.power.util.CKConfiguration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>
<%@ taglib uri="http://cksource.com/ckfinder" prefix="ckfinder"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<c:choose>
	<c:when test="${pageTitle!=null}">
		<title>${pageTitle}</title>
	</c:when>
	<c:otherwise>
		<title><tiles:insertAttribute name="title" ignore="true" /></title>
	</c:otherwise>
</c:choose>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
<link
	href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link
	href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link
	href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css"
	rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="<c:url value='/admin/css/AdminLTE.css'/>" rel="stylesheet"
	type="text/css" />
<!-- DATA TABLES -->
<link
	href="<c:url value='/admin/css/datatables/dataTables.bootstrap.css'/>"
	rel="stylesheet" type="text/css" />
<!-- Jcrop -->
<link href="<c:url value='/admin/css/Jcrop/imgareaselect-default.css'/>"
	rel="stylesheet" type="text/css" />
<!-- view image -->
<link href="<c:url value='/admin/css/lightbox/ekko-lightbox.min.css'/>"
	rel="stylesheet" type="text/css" />
<!-- iCheck for checkboxes and radio inputs -->
<link href="<c:url value='/admin/css/iCheck/minimal/blue.css'/>"
	rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
          <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

<!-- add new calendar event modal -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
	type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="<c:url value='/admin/js/app.js'/>" type="text/javascript"></script>

<script
	src="<c:url value='/admin/js/plugins/datatables/jquery.dataTables.js'/>"
	type="text/javascript"></script>
<script
	src="<c:url value='/admin/js/plugins/datatables/dataTables.bootstrap.js'/>"
	type="text/javascript"></script>
<!-- iCheck -->
<script src="<c:url value='/admin/js/plugins/iCheck/icheck.min.js'/>"
	type="text/javascript"></script>

<!-- file upload -->
<script
	src="<c:url value='/admin/js/plugins/fileupload/jquery.ui.widget.js'/>"
	type="text/javascript"></script>
<script
	src="<c:url value='/admin/js/plugins/fileupload/jquery.iframe-transport.js'/>"
	type="text/javascript"></script>
<script
	src="<c:url value='/admin/js/plugins/fileupload/jquery.fileupload.js'/>"
	type="text/javascript"></script>
<script
	src="<c:url value='/admin/js/plugins/jcrop/jquery.imgareaselect.pack.js'/>"
	type="text/javascript"></script>

<script
	src="<c:url value='/admin/js/plugins/lightbox/ekko-lightbox.min.js'/>"
	type="text/javascript"></script>
</head>

<body class="skin-blue">
	<!-- header logo: style can be found in header.less -->
	<header class="header">
		<tiles:insertAttribute name="top-header" />
	</header>
	<div class="wrapper row-offcanvas row-offcanvas-left">
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="left-side sidebar-offcanvas">
			<tiles:insertAttribute name="left-menu" />
		</aside>

		<!-- Right side column. Contains the navbar and content of the page -->
		<aside class="right-side">
			<tiles:insertAttribute name="body" />
		</aside>
		<!-- /.right-side -->
	</div>
	<!-- ./wrapper -->

	<!-- ALERT DIALOG -->
	<!-- Modal HTML -->
	<div id="warning-dialog" class="modal fade">
		<div class="modal-dialog">
			<div class="alert alert-warning alert-dismissable modal-content">
				<i class="fa fa-warning"></i>
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">x</button>

				<div class="modal-body">
					<p>
						<spring:message code="admin.warning.dialog.body" />
					</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<spring:message code="admin.form.dialog.button.close" />
					</button>
					<button type="button" class="btn btn-danger" data-dismiss="modal"
						onclick="confirm();">
						<spring:message code="admin.form.dialog.button.confirm" />
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal HTML -->
	<div id="info-dialog" class="modal fade">
		<div class="modal-dialog">
			<div class="alert alert-info alert-dismissable modal-content">
				<i class="fa fa-info"></i>
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">x</button>
				<div class="modal-body">
					<p>
						<spring:message code="admin.info.dialog.body" />
					</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal HTML -->
	<div id="success-dialog" class="modal fade">
		<div class="modal-dialog">
			<div class="alert alert-success alert-dismissable modal-content">
				<i class="fa fa-check"></i>
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">x</button>
				<div class="modal-body">
					<p>
						<spring:message code="admin.success.dialog.body" />
					</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal HTML -->
	<div id="error-dialog" class="modal fade">
		<div class="modal-dialog">
			<div class="alert alert-danger alert-dismissable modal-content">
				<i class="fa fa-ban"></i>
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">x</button>
				<div class="modal-body">
					<p>
						<spring:message code="admin.error.dialog.body" />
					</p>
				</div>
			</div>
		</div>
	</div>

	<!-- COMPOSE MESSAGE MODAL -->
	<div class="modal fade" id="compose-modal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">
						<i class="fa fa-envelope-o"></i>
						<spring:message code="admin.message.compose" />
					</h4>
				</div>
				<form action="#" method="post">
					<div class="modal-body">
						<div class="form-group">
							<div class="input-group">
								<span class="input-group-addon"><spring:message
										code="admin.message.from" />:</span> <input name="from" id="from"
									type="email" class="form-control" disabled="disabled" value="${footerContact}">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<span class="input-group-addon"><spring:message
										code="admin.message.to" />:</span> <input name="to" type="email"
									class="form-control" id="to">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<span class="input-group-addon"><spring:message
										code="admin.message.cc" />:</span> <input name="cc" type="email"
									class="form-control" id="cc">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<span class="input-group-addon"><spring:message
										code="admin.message.subject" />:</span> <input name="subject"
									type="text" id="subject" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<textarea name="content" id="content" class="form-control"
								style="height: 120px;"></textarea>
								<ckfinder:setupCKEditor basePath="/e-shop/ckfinder/" editor="content" />
								<ckeditor:replace replace="content"
												basePath="/e-shop/admin/ckeditor/"
												config="<%=CKConfiguration.createFullConfig()%>" />
						</div>
						<%-- <div class="form-group">
							<div class="btn btn-success btn-file">
								<i class="fa fa-paperclip"></i>
								<spring:message code="admin.message.attachment" />
								<input type="file" name="attachment" id="attachment" />
							</div>
							<p class="help-block">
								<spring:message code="admin.message.max.size" />
							</p>
						</div> --%>

					</div>
					<div class="modal-footer clearfix">

						<button type="button" class="btn btn-danger" data-dismiss="modal">
							<i class="fa fa-times"></i>
							<spring:message code="admin.form.dialog.button.close" />
						</button>

						<button type="button" class="btn btn-primary pull-left" onclick="sendEmail();">
							<i class="fa fa-envelope"></i>
							<spring:message code="admin.message.send" />
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /.modal -->
</body>
</html>
<script type="text/javascript">
var flag = false;
$('#compose-modal').on('shown.bs.modal', function (e) {
	//reset all field
	$('#to').val('');
	$('#cc').val('');
	$('#subject').val('');
	$('#compose-modal #to').removeAttr('disabled');
	CKEDITOR.instances.content.setData('');
	console.log(flag);
	if (flag) {
		$('#compose-modal #to').val('${message.from}');
		$('#compose-modal #to').attr('disabled',"disabled");
		$('#compose-modal #subject').val('${message.subject}');
		flag = false;
	}
});
	
function sendEmail() {
	if (!validateEmail($('#from').val().trim())) {
		$('#from').css('border-color','red');
		return false;
	} else {
		$('#from').css('border-color','');
	}
	
	if (!validateEmail($('#to').val().trim())) {
		$('#to').css('border-color','red');
		return false;
	} else {
		$('#to').css('border-color','');
	}
	
	if ($('#cc').val().trim() != '' && !validateEmail($('#cc').val().trim())) {
		$('#cc').css('border-color','red');
		return false;
	} else {
		$('#cc').css('border-color','');
	}
	
	if ($('#subject').val().trim().length == 0) {
		$('#subject').css('border-color','red');
		return false;
	} else {
		$('#subject').css('border-color','');
	}
	

	var message = {
			from : $('#from').val(),
			to : $('#to').val(),
			cc : $('#cc').val(),
			subject : $('#subject').val(),
			content : CKEDITOR.instances.content.getData()
		};

	var jsonData = JSON.stringify(message);

	$.ajax({
		url : 'createEmail.html',
		type : 'POST',
		data : jsonData,
		dataType : 'text',
		contentType : "application/json; charset=utf-8",
		success : function(response) {
			$('#success-dialog .modal-body').html('<spring:message javaScriptEscape="true" code="admin.message.sent.success" />');
			$("#success-dialog").modal('show');
		},
		error : function() {
		}
	});
	
	//close 
	$('#compose-modal').modal('hide');
}

	function validateEmail(email) {
		var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return re.test(email);
	}
</script>